<template>
	<view class="bg-white flex flex-direction" style="width: 100vw;height: 100vh;">
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="backText">返回</block>
			<block slot="content">
				<text>个人简介</text>
			</block>
		</cu-custom>
		<view class="flex align-center margin justify-between " >
			<!-- 头像 姓名 -->
			<view class="flex align-center">
				<view class="cu-avatar round margin-right-xs"
					:style="{backgroundImage:'url(' + profile.avatar + ')'}">
				</view>
				<text class="text-black" style="font-weight: 600;font-size: 32rpx;">{{profile.username}}</text>
			</view>
			<!-- 是否关注 -->
			<view class="flex flex-direction">
				<button :class="[isConcerned?'cu-btn block bg-grey margin-tb-sm':'cu-btn block bg-blue margin-tb-sm']"
					style="width: 150rpx; height: 65rpx;" @click="concern()" :disabled="concernDisabled">{{isConcerned?'已关注':'关注'}}</button>
			</view>
		</view>
		<view class="margin-right margin-left flex justify-between">
			<button class="cu-btn block bg-brown margin-tb-sm" style="width: 50%; height: 65rpx;" :disabled="blackDisabled" @click="addBlack">{{isBlack?"取消拉黑":"拉黑"}}</button>
			<button class="cu-btn block bg-green margin-tb-sm margin-left-sm" style="width: 50%; height: 65rpx;" @click="goToChat">私信</button>
		</view>
		<!-- 个人描述 -->
		<view class="margin-left margin-right flex justify-between" >
			<text class="text-gray" style="font-size: 32rpx; line-height: 48rpx;">{{profile.description}}</text>
		</view>
		<!-- 好物推荐 -->
		<view class="bg-cyan margin flex align-center justify-between radius padding" style="height: 90rpx;">
			<view class="flex align-center">
				<view style="transform: rotate(330deg);" class="margin-right">
					<text class="cuIcon-goodsfill text-yellow " style="font-size: 42rpx;"></text>
				</view>
				<text class="text-black">{{profile.username}}的好物推荐</text>
			</view>
			<view>
				<text class="cuIcon-right" style="font-size: 35rpx;"></text>
			</view>
		</view>
		<!-- 课程，文章作品展示 -->
		<view class="padding flex align-center" style="font-size: 32rpx;" >
			<view v-for="(item,index) in tablist" :key="index"  :class="[currentIndex==index?'margin-right text-blue':'margin-right text-black']" @click="change(index)">{{item}}</view>
		</view>
		<swiper @change="onSwiperchange" :current="currentIndex" class="padding flex-sub" style="touch-action: none;height: 50vh;">
			<swiper-item v-for="(item,index) in tablist" :key="index" style="width: 100%;" v-show="isShow">
				<scroll-view  scroll-y style="width: 100%;height: 100%;">
				<view v-show="!curlist.length && index==0">对方比较懒，什么课程都没留下</view>  
				<view v-for="(course,index2) in curlist" :key="'course'+index2" >
					<singlecell :books="course" v-if="course.columnType==1"></singlecell>
				</view>
				<view v-show="!curlist.length && index==1">对方比较懒，什么文章都没留下</view>	
				<view v-for="(art,index2) in curlist"   :key="'art'+index2">
					<!-- 展示列表 -->
					<artcell :art="art" v-if="art.columnType==0"></artcell>
				</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import cuCustom from '../../plugin/colorui/components/cu-custom.vue'
	import artcell from '../../components/column/artcell.vue'
	import singlecell from '../../components/column/singlecell.vue'
	export default {
		components: {
			cuCustom,artcell,singlecell
		},
		data() {
			return {
				profile:{},//个人简介信息
				isConcerned: false,
				isBlack: false,
				blackDisabled: false,
				concernDisabled: false,
			    tablist:['课程','文章'],
				currentIndex:0,
				curlist:[],
				userId: this.$store.getters.userid,
				authorId: this.$Route.query.authorId,
				isShow:true,
			}
		},
		onLoad() {
			if(this.userId == this.authorId){
				this.$Router.replace({
					name: 'myCenter'
				})
			}
			
			// 获取个人作品
			this.getOwnData()
			//获取个人简介
			this.$http.get('/ucenter/member/getMemberProfile/'+this.authorId+'/'+this.userId).then((res)=>{
				this.profile=res.data.result
				console.log(this.profile)
				this.isConcerned = res.data.result.isFollow
				this.isBlack = res.data.result.isBlack
			})
			
		},
		methods: {
			goToChat() {
				if(!this.$store.getters.userid){
				this.$verifyLogin().then(()=>{
					this.$Router.push({name:'loginFrontEnd'})
				}).catch(()=>{
					return ;
				})
				}
				else{
				let targetUserId = this.$Route.query.authorId;
				let targetUserName = this.profile.username;
				let targetAvatar = this.profile.avatar;
				let develop = this.develop;
				
				// #ifndef APP-PLUS
				this.$Router.push({
					name: 'chat',
					params: {
						targetUserId: targetUserId,
						targetUserName: targetUserName,
						targetAvatar: targetAvatar,
						develop: develop
					}
				})
				// #endif
				
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: `/pages/chat/chat?targetUserId=${targetUserId}&targetUserName=${targetUserName}&targetAvatar=${targetAvatar}&develop=${develop}`
				})
				// #endif
				}
			},
			addBlack() {
				if(!this.$store.getters.userid){
				this.$verifyLogin().then(()=>{
					this.$Router.push({name:'loginFrontEnd'})
				}).catch(()=>{
					return ;
				})
				}
				else{
				this.blackDisabled = true;
				if(!this.isBlack) {
					this.$tip.confirm("确认要拉黑该用户吗？", true).then(()=> {
						this.$http.post('/ucenter/black/addBlack', {
							blackId: this.authorId,
							userId: this.userId
						}).then(res=>{
							const data = res.data;
							if(data.success) {
								this.$tip.success("拉黑成功！");
								this.isBlack = true;
							} else {
								console.log(data.message)
							}
						}).finally(() => {
							this.blackDisabled = false;
						})
					}, () => {	//取消拉黑
						this.isBlack = false;
						this.blackDisabled = false;
					})
				} else {
					this.$http.post('/ucenter/black/removeBlack', {
						blackId: this.authorId,
						userId: this.userId
					}).then(res=>{
						const data = res.data;
						if(data.success) {
							this.$tip.success("取消拉黑成功！");
							this.isBlack = false;
						} else {
							console.log(data.message)
						}
					}).finally(() => {
						this.blackDisabled = false;
					})
				}
				}
			},
			concern() {
				if(!this.$store.getters.userid){
				this.$verifyLogin().then(()=>{
					this.$Router.push({name:'loginFrontEnd'})
				}).catch(()=>{
					return ;
				})
				}
				else{
				this.concernDisabled = true;
				this.isConcerned = !this.isConcerned;
				let that = this;
				if(this.isConcerned) {
					this.$http.post("/ucenter/follow/followOne", 
					{
						userId: that.userId,
						followedId: that.profile.id
					}).then(res=>{
						let data =  res.data;
						if(data.success){
							that.$tip.success(data.message)
						}
					}).catch(err => {
						console.log(err);
					}).finally(() => {
						this.concernDisabled = false;
					});
				}else {
					this.$http.post("/ucenter/follow/unfollowOne",
					{
						userId: this.userId,
						followedId: this.profile.id
					}).then(res=>{
						let data =  res.data;
						if(data.success){
							this.$tip.success(data.message)
						}
					}).catch(err => {
						console.log(err);
					}).finally(() => {
						this.concernDisabled = false;
					});
				}
				}
			},
			change(index){
				this.currentIndex=index
			},
			onSwiperchange(e){
				this.currentIndex=e.detail.current
				this.getOwnData()
			},
			getOwnData(){
				this.isShow = false;
				if(this.currentIndex==1){
					this.$http.get('/edu/article/getArticleList/'+this.authorId).then((res)=>{
						this.curlist=res.data.result
						this.curlist.forEach((item)=>{
							item.columnType=0
							item["imglist"]=item.cover.split(",")
							delete item.cover
						})
					}).finally(() => {
						this.isShow = true;
					})
				}
				else{
					this.$http.get('/edu/course/getOwnCourse/' + this.authorId).then((res) => {
						this.curlist = res.data.result
						this.curlist.forEach(item =>{
							item.columnType=1
						})
					}).finally(() => {
						this.isShow = true;
					})
				}
				
			}
		}
	}
</script>

<style>
</style>
